// import { useEffect, useRef, useMemo } from "react";
// import {
//     TableSheet,
//     S2DataConfig,
//     S2Options,
//     HeaderIconClickParams,
//     Tooltip,
//     S2CellType,
//     TooltipShowOptions,
//     TooltipContentType,
//     BaseTooltipOperatorMenuOptions,
//     SpreadSheet,
//     BaseTooltip,
//     S2Event,
// } from "@antv/s2";
// import { Menu } from 'antd';
// import type { MenuProps } from 'antd';
// import { createRoot } from 'react-dom/client';
// import '@antv/s2/dist/s2.min.css';

// interface Props {
//     dataCfg: S2DataConfig;
//     // options: S2Options;
//     adaptive?: boolean;
// }

// export default function TableSheetComponent({ dataCfg, adaptive }: Props) {
//     // 容器ref
//     const containerRef = useRef<HTMLDivElement>(null);

//     // 表格对象ref
//     const sheetRef = useRef<TableSheet | null>(null);

//     const shouldInit = useRef(true);
//     const isDevMode = useMemo(() => {
//         try {
//             return process.env["NODE_ENV"] !== "production";
//         } catch {
//             return false;
//         }
//     }, []);

//     const tooltipConfig: Tooltip = {
//         enable: true,
//         operation: {
//             tableSort: true,
//             menu: {
//                 items: [
//                     {
//                         key: "asc",
//                         label: "升序",
//                         icon: "Trend",
//                         onClick: (info, cell) => {
//                             console.log(
//                                 `## onClick cell=${JSON.stringify(cell)}`
//                             );
//                         },
//                         visible: (cell) => true,
//                     },
//                     {
//                         key: "desc",
//                         label: "降序",
//                         icon: "Trend",
//                         onClick: (info, cell) => {
//                             console.log(
//                                 `## onClick cell=${JSON.stringify(cell)}`
//                             );
//                         },
//                         visible: (cell) => true,
//                     },
//                 ],
//             },
//         },

//         colCell: {
//             enable: true,
//             operation: {
//                 tableSort: true,
//                 menu: {
//                     items: [
//                         { key: "asc", label: "升序" },
//                         { key: "desc", label: "降序" },
//                         { key: "none", label: "不排序" },
//                     ],
//                 },
//             },
//             content: (
//                 cell: S2CellType,
//                 defaultTooltipShowOptions: TooltipShowOptions<TooltipContentType, BaseTooltipOperatorMenuOptions>
//             ) => {
//                 console.log(defaultTooltipShowOptions);
//                 return `  
//                     <div class="custom-menu">  
//                         <div class="menu-item" data-key="option1">选项 1</div>  
//                         <div class="menu-item" data-key="option2">选项 2</div>  
//                     </div>  
//                 `;
//             },
//         },
//     };

//     const options: S2Options = {
//         width: undefined,
//         height: undefined,
//         seriesNumber: {
//             enable: true,
//             text: "序号",
//         },
//         frozen: {
//             rowCount: 1,
//             colCount: 1,
//             trailingColCount: 1,
//         },
//         style: {
//             colCell: {
//                 widthByField: {
//                     peopleCount: 150,
//                     industryType: 180,
//                     level: 150,
//                     area: 150,
//                     gdp: 150,
//                 },
//             },
//         },
//         // 展示默认表头图标（可以自定义）
//         showDefaultHeaderActionIcon: true,
//         tooltip: tooltipConfig,

//         placeholder: {
//             // 自定义空数据单元格占位符
//             cell: "-",
//             // cell: (meta) => '-',
//             // 自定义空数据占位符: 文本,图标的大小和间距可以通过主题配置修改 https://s2.antv.antgroup.com/api/general/s2-theme#empty
//             empty: {
//                 /**
//                  * 自定义 Icon, 支持 customSVGIcons 自定义注册和内置的 Icon
//                  * @see https://s2.antv.antgroup.com/manual/advanced/custom/custom-icon
//                  */
//                 icon: "Empty",
//                 description: "暂无数据",
//             },
//         },
//     };

//     useEffect(() => {
//         // 兼容 React 18 StrictMode 开发环境下渲染两次
//         if (isDevMode && !shouldInit.current) {
//             return;
//         }

//         if (!containerRef.current) {
//             return;
//         }

//         const { clientWidth, clientHeight } = containerRef.current;
//         if (clientWidth > 0 && !options.width) {
//             options.width = clientWidth;
//         }
//         if (clientHeight > 0 && !options.height) {
//             options.height = clientHeight;
//         }

//         // 初始化
//         sheetRef.current = new TableSheet(
//             containerRef.current,
//             dataCfg,
//             options
//         );

//         // 需要在 tooltip 显示后手动绑定事件
//         sheetRef.current.on(S2Event.GLOBAL_ACTION_ICON_CLICK, () => {
//             setTimeout(() => {
//                 const menuItems = document.querySelectorAll(".menu-item");
//                 menuItems.forEach((item) => {
//                     item.addEventListener("click", (e) => {
//                         // @ts-ignore
//                         const key = e.target.getAttribute("data-key");
//                         console.log("点击:", key);
//                         sheetRef.current?.hideTooltip();
//                     });
//                 });
//             }, 0);
//         });

//         //首次渲染
//         sheetRef.current.render();
//         shouldInit.current = false;

//         return () => {
//             //清理事件、G Canvas 实例
//             sheetRef.current?.destroy();
//             sheetRef.current = null;
//         };
//     }, []);

//     // 响应式更新数据
//     useEffect(() => {
//         if (sheetRef.current) {
//             sheetRef.current.setDataCfg(dataCfg);
//             // antv/s2存在的一个潜在问题，这里必须使用强制刷新才能保证更新数据
//             // setDataCfg同步更新实例的 dataCfg 属性，但不会立即标记脏状态，导致render(false)时不会刷新
//             sheetRef.current.render();
//         }
//     }, [dataCfg]);

//     /* 自适应大小 */
//     useEffect(() => {
//         if (!adaptive || !containerRef.current || !sheetRef.current) {
//             return;
//         }

//         const ro = new ResizeObserver(([entry]) => {
//             const { width, height } = entry.contentRect;
//             if (!containerRef.current) return;

//             // 1. 销毁旧实例
//             sheetRef.current?.destroy();

//             // 2. 按新尺寸重新 new
//             const sheet = new TableSheet(
//                 containerRef.current,
//                 dataCfg, // 直接用最新 dataCfg
//                 { ...options, width, height }
//             );
//             sheet.render();
//             sheetRef.current = sheet; // 3. 更新 ref
//         });

//         ro.observe(containerRef.current);
//         return () => {
//             ro.disconnect();
//             sheetRef.current?.destroy();
//         };
//     }, [adaptive, dataCfg, options]);

//     return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
// }
